<template>
    <d2-container>
      <el-tabs v-model="tabActive"  @tab-click="handleTabSwitch">
        <el-tab-pane label="门店详情" name="1">
          <el-row>
            <el-col :lg="20">
                <el-form ref="detailForm" :model="detailForm" :rules="rules" label-width="140px">
                    <el-form-item label="会员二维码" v-if="id">
                        <img style="width: 100px; height: 100px" :src="'https://' + detailForm.storeQR" />
                        <img style="width: 100px; height: 100px;margin-left:10px" :src="'https://' + detailForm.publicStoreQR" />
                    </el-form-item>
                    <el-form-item label="门店名称" prop="name">
                        <el-input placeholder="门店名称" v-model="detailForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="简要描述" prop="brief">
                        <el-input placeholder="简要描述" v-model="detailForm.brief"></el-input>
                    </el-form-item>
                    <el-form-item label="门店标签" prop="label">
                        <el-select v-model="detailForm.label" multiple placeholder="请选择">
                          <el-option
                            v-for="item in labelAry"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                        <!-- <el-button type="primary" @click="addRowData('label', dataByLabel)" size="small">添加标签</el-button>
                        <sub style="color:red;">*最多6个</sub>
                        <div style="margin-bottom: 5px;vertical-align: top;" v-for="(item, index) in dataByLabel" :key="index">
                            <el-input style="width: 200px;" placeholder="标签" v-model="item.value"></el-input>
                            <el-button type="danger" @click="removeRowData('label', dataByLabel, index)" style="margin-left: 10px;">删除</el-button>
                        </div> -->
                    </el-form-item>
                    <el-form-item label="普通会员兑换比例" prop="attribute">
                        <el-input-number placeholder="普通会员兑换比例" v-model="detailForm.attribute" controls-position="right" :min="0" :max="100"></el-input-number>
                    </el-form-item>
                    <el-form-item label="VIP会员兑换比例" prop="attributeVIP">
                        <el-input-number placeholder="VIP会员兑换比例" v-model="detailForm.attributeVIP" controls-position="right" :min="0" :max="100"></el-input-number>
                    </el-form-item>
                    <el-form-item label="营业时间" required>
                        <el-button type="primary" @click="addRowData('hours', dataByBusiness)" size="small">设置营业时间</el-button>
                        <div style="margin-bottom: 5px;vertical-align: top;" v-for="(item, index) in dataByBusiness" :key="index">
                            <el-select v-model="item.day" style="width: 90px">
                                <el-option
                                        v-for="item in weekDaysAry"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>

                            <div style="display: inline-block; vertical-align: top;">
                                <div v-for="(hour, index) in item.hours" :key="index" :style="{'display': index === 0?'inline-block':'block', 'margin-bottom':'5px'}">
                                    <el-time-picker
                                            v-model="hour.start"
                                            style="width: 150px"
                                            value-format="HH:mm:ss"
                                            placeholder="开始时间">
                                    </el-time-picker>
                                    <el-time-picker
                                            v-model="hour.end"
                                            style="width: 150px"
                                            value-format="HH:mm:ss"
                                            placeholder="结束时间">
                                    </el-time-picker>
                                    <el-button v-if="index === 0" type="primary" @click="addColumnData('hours', item.hours)" style="margin-left: 10px;" icon="el-icon-plus"></el-button>
                                    <el-button v-if="index !== 0" type="danger" @click="removeColumnData('hours', item.hours, index)" style="margin-left: 10px;" icon="el-icon-minus"></el-button>
                                </div>
                            </div>
                            <el-button type="danger" @click="removeRowData('hours', dataByBusiness, index)" style="margin-left: 10px;">删除</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="联系人" required>
                        <el-button type="primary" @click="addRowData('contact', dataByContact)" size="small">添加联系人</el-button>
                        <div style="margin-bottom: 5px;vertical-align: top;" v-for="(item, index) in dataByContact" :key="index">
                            <el-input style="width: 200px;" placeholder="联系人" v-model="item.value"></el-input>
                            <el-button type="danger" @click="removeRowData('contact', dataByContact, index)" style="margin-left: 10px;">删除</el-button>
                        </div>
                    </el-form-item>

                    <el-form-item label="轮播图" prop="images">
                        <banner v-model="detailForm.images"></banner>
                    </el-form-item>
                    <el-form-item  label="推荐菜品" required>
                        <el-button type="primary" size="small" @click="fnOpenPopup('dish')">选择菜品</el-button>
                        <sub style="color: red;">* 注：使用拖拽切换顺序</sub>
                        <el-table class="sort" :data="dishData" row-key="_id">
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column label="名称" width="180" prop="title" />
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="() => {recommendType = 'dish'; removeDish(scope.$index)}" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item  label="最新活动" required>
                        <el-button type="primary" size="small" @click="fnOpenPopup('activity')">选择活动</el-button>
                        <sub style="color: red;">* 注：使用拖拽切换顺序</sub>
                        <el-table class="sort activity" :data="activeData" row-key="_id">
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column label="名称" width="180" prop="title" />
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="() => {recommendType = 'activity'; removeDish(scope.$index)}" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item label="详情" prop="detail">
                        <simpleRich v-model="detailForm.detail"></simpleRich>
                    </el-form-item>
                    <el-form-item label="门店菜单" prop="takeawayMenu">
                        <simpleRich v-model="detailForm.takeawayMenu"></simpleRich>
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input placeholder="详细地址" v-model="detailAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="英文地址" prop="addressEN">
                        <el-input placeholder="英文地址详细地址" v-model="detailForm.addressEN"></el-input>
                    </el-form-item>
                    <el-form-item label="地图" required>
                        <div style="display: flex;">
                            <el-select v-model="detailForm.city" style="width: 130px">
                                <el-option label="上海">上海</el-option>
                            </el-select>
                            <el-input placeholder="详细地址" v-model="address"></el-input>
                            <el-button style="margin-left: 10px;" type="primary" @click="getLocation">定位</el-button>
                        </div>
                        <div id="container_map" style="width:100%;height:400px;">
                        </div>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="submitForm('detailForm')">确定</el-button>
                        <el-button @click="resetForm('detailForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="门店消费记录" name="2">
          <div class="muse_filter_box">
              <el-form ref="filtersForm" :model="form">
                  <el-row :gutter="20">
                      <el-col :span="6">
                          <el-form-item>
                              <el-input placeholder="用户手机号" v-model="form.cellphone"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="6">
                          <el-form-item>
                              <el-date-picker style="width: 100%;" v-model="form.startDate" value-format="yyyy-MM-dd" type="date" placeholder="开始时间"/>
                          </el-form-item>
                      </el-col>
                      <el-col :span="6">
                          <el-form-item>
                              <el-date-picker style="width: 100%;" v-model="form.endDate" value-format="yyyy-MM-dd" type="date" placeholder="结束时间"/>
                          </el-form-item>
                      </el-col>
                      <el-col :span="6">
                          <el-button type="primary" @click="filterSearch('filtersForm')">搜索</el-button>
                          <el-button @click="resetFormByFilter('filtersForm')">重置</el-button>
                      </el-col>
                  </el-row>
              </el-form>
          </div>
          <div class="muse_control_box" style="text-align: right;">
            <el-button class="muse_float_right" type="primary" @click="exportExcel">导出EXCEL</el-button>
          </div>
          <div style="margin-bottom:10px;">
              <!-- <span class="sum_up_label">赠送积分: {{giftPoint}}</span>
              <span class="sum_up_label">使用积分: {{usedPoint}}</span> -->
              <span class="sum_up_label">赠送积分: {{storeGiftPoint}}</span>
              <span class="sum_up_label">待审积分: {{storePendingPoint}}</span>
              <span class="sum_up_label">使用积分: {{usedPoint}}</span>
          </div>
          <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column fixed type="selection" width="55"/>
                <el-table-column prop="store.name" label="门店名称" />
                <el-table-column prop="member.code" label="会员号" />
                <el-table-column prop="cellphone" label="用户手机号" />
                <el-table-column prop="payPrice" label="消费金额" />
                <el-table-column prop="point" label="使用积分" />
                <el-table-column prop="earnPoints" label="赠送积分" />
                <el-table-column prop="verify" label="审核状态">
                  <template slot-scope="{row: {verify}}">
                    {{verify === 0 ? '未审核': verify === 1?'通过':'拒绝'}}
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="userPoint[0].expiredPoint" label="过期积分" /> -->
                <el-table-column prop="updatedAt" label="最新时间" width="150">
                  <template slot-scope="{row: {updatedAt}}">
                        {{updatedAt | date('YYYY-MM-DD HH:mm')}}
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button @click="recall(scope.row)" type="text" size="small">撤销</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="muse_pagination"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paging.page"
                    :page-sizes="paging.pageSizeAry"
                    :page-size="paging.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paging.total">
            </el-pagination>
        </el-tab-pane>
      </el-tabs>

      <el-dialog title="菜品列表" :visible.sync="dialogDataVisibleByDish">
          <el-table :data="tableData"
                    width="100%"
                    ref="ref_table"
                    @select="handleSelectionChange">
              <el-table-column fixed type="selection" width="55"/>
              <el-table-column prop="title" label="主标题"/>
              <el-table-column prop="subtitle" label="子标题"/>
              <el-table-column prop="createdAt" label="创建时间">
                  <template slot-scope="scope">
                      {{ scope.row.createdAt | date('YYYY-MM-DD HH:mm') }}
                  </template>
              </el-table-column>
          </el-table>
          <el-pagination
                    class="muse_pagination"
                    :background="true"
                    @size-change="handleSizeChangeByOne"
                    @current-change="handleCurrentChangeByOne"
                    :current-page="pagingByOne.page"
                    :page-sizes="pagingByOne.pageSizeAry"
                    :page-size="pagingByOne.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagingByOne.total">
          </el-pagination>
          <span slot="footer" class="dialog-footer">
              <el-button @click="fnClosePopup">取 消</el-button>
              <el-button type="primary" @click="fnSaveChoosed">确 定</el-button>
          </span>
      </el-dialog>
      <el-dialog title="活动列表" :visible.sync="dialogDataVisibleByActive">
            <el-table :data="tableData"
                      width="100%"
                      ref="ref_table"
                      @select="handleSelectionChange">
                <el-table-column fixed type="selection" width="55"/>
                <el-table-column prop="title" label="主标题"/>
                <el-table-column prop="subtitle" label="子标题"/>
                <el-table-column prop="createdAt" label="创建时间">
                    <template slot-scope="scope">
                        {{ scope.row.createdAt | date('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="muse_pagination"
                    :background="true"
                    @size-change="handleSizeChangeByOne"
                    @current-change="handleCurrentChangeByOne"
                    :current-page="pagingByOne.page"
                    :page-sizes="pagingByOne.pageSizeAry"
                    :page-size="pagingByOne.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagingByOne.total">
            </el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button @click="fnClosePopup">取 消</el-button>
                <el-button type="primary" @click="fnSaveChoosed">确 定</el-button>
            </span>
        </el-dialog>
    </d2-container>
</template>

<script>
  import simpleRich from '@/components/muse/simple-rich/simple-rich'
  import banner from '@/components/muse/banner/banner'
  import uploadMixin from '../mixins/uploadMixin'
  import tableMixin from '../mixins/tableMixin'
  import { weekDaysAry, labelAry } from '@/config/common.data'
  import { changeStore, getOneStore, getExpenseHistoryList, recallUserExpenseHistory, getDishList, getActivitylist, exportStoreExpenseHistory } from '@/api/admin'
  import Sortable from 'sortablejs'
  import excel from '@/libs/util.excel.js'
  
  export default {
    name: 'changeStore',
    mixins: [uploadMixin, tableMixin],
    components: {
      simpleRich,
      banner
    },
    data() {
      return {
        detailForm: {
          name: '',
          brief: '',
          detail: '',
          address: '',
          location: '', // 地图位置，经度，纬度
          city: '上海', // 城市
          district: '', // 区域
          hours: '', // 营业时间
          contact: '', // 联系电话
          label: '', // 标签
          images: [], // 轮播图
          attribute: 0,
          attributeVIP: 0,
          dish: [],
          recommendActivity: [],
          takeawayMenu: '',
          addressEN: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入门店名称', trigger: 'blur' }
          ],
          brief: [
            { required: true, message: '请输入门店简介', trigger: 'blur' }
          ],
          detail: [
            { required: true, message: '请输入门店详情', trigger: 'blur' }
          ],
          takeawayMenu: [
            { required: true, message: '请输入门店菜单', trigger: 'blur' }
          ],
          label: [
            { required: true, message: '请设置门店标签', trigger: 'blur' }
          ],
          images: [
            { required: true, message: '请设置顶部轮播图', trigger: 'blur' }
          ],
          attribute: [
            { required: true, message: '请设置兑换比例', trigger: 'blur' }
          ], 
          attributeVIP: [
            { required: true, message: '请设置会员兑换比例', trigger: 'blur' }
          ]
        },
        labelArray: [
          {
            label: '酒吧',
            value: '酒吧'
          },
          {
            label: '餐厅',
            value: '餐厅'
          }
        ],
        labelAry,
        dataByLabel: [],
        dataByContact: [],
        dataByBusiness: [],
        weekDaysAry,
        // 地图相关
        latitude: 0,
        longitude: 0,
        address: '',
        // 地址解析实例
        geocoder: null,
        map: null,
        tabActive: '1',
        id: '',
        // 推荐相关
        recommendType: '',
        dishData: [],
        dialogDataVisibleByDish: false,
        pagingByOne: {
          page: 1,
          total: 0,
          pageSize: 10,
          pageSizeAry: [10, 50, 100],
        },
        activeData: [],
        dialogDataVisibleByActive: false,
        detailAddress: '',
        giftPoint: 0,
        usedPoint: 0,
        storeGiftPoint:0,
        storePendingPoint:0,


        // 过滤器相关
        form:{
          cellphone: '',
          startDate: '',
          endDate: ''
        }
      }
    },
    created () {
      this.id = this.$route.query.id
      if(this.id) {
        this.getOneStore()
      }
      this.getMyLocation()
    },
    mounted() {
      this.rowDrop()
      this.rowDropByActivity()
    },
    methods: {
      rowDrop() {
        const tbody = document.querySelector('.el-table__body-wrapper tbody')
        const _this = this
        Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
            const currRow = _this.dishData.splice(oldIndex, 1)[0]
            _this.dishData.splice(newIndex, 0, currRow)
          }
        })
      },
      rowDropByActivity() {
        const tbody = document.querySelector('.activity .el-table__body-wrapper tbody')
        console.log(123123, tbody)
        const _this = this
        Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
            const currRow = _this.activeData.splice(oldIndex, 1)[0]
            _this.activeData.splice(newIndex, 0, currRow)
          }
        })
      },
      // 设置联系人电话和营业时间
      // 设置行数据
      addRowData(type, rowObj = null) {
        if(type === 'hours') {
          rowObj.push({
            day: 0,
            hours: [
              {
                start: '',
                end: ''
              }
            ]
          })
        } else if(type === 'contact') {
          rowObj.push({value: ''})
        } else if(type === 'label') {
          if(rowObj.length > 6) {
            this.$message({
              message: '警告，最多只能添加6个标签',
              type: 'warning'
            });
            return
          }
          rowObj.push({value: ''})
        }
      },
      // 删除数据行
      removeRowData(type, rowObj = null, index = null) {
          rowObj.splice(index, 1)
      },
      // 设置列数据
      addColumnData(type, columnObj = null) {
        if(type === 'hours') {
          columnObj.push({
            start: '',
            end: ''
          })
        }
      },
      // 删除列数据
      removeColumnData(type, columnObj = null, index = null) {
        columnObj.splice(index, 1)
      },
      // 设置非受控组件数据进入提交表单
      setFormData() {
        // 检查和设置营业时间
        this.detailForm.hours = []
        this.detailForm.contact = []
        // this.detailForm.label = []
        this.detailForm.hours = this.dataByBusiness
        // 设置联系人
        this.dataByContact.forEach(item => {
          item.value && this.detailForm.contact.push(item.value)
        })
        // // 设置标签
        // this.dataByLabel.forEach(item => {
        //   item.value && this.detailForm.label.push(item.value)
        // })
        // 设置推荐菜品
        this.detailForm.dish = []
        this.dishData.forEach(item => {
          this.detailForm.dish.push(item._id)
        })
        // 设置推荐活动
        this.detailForm.recommendActivity = []
        this.activeData.forEach(item => {
          this.detailForm.recommendActivity.push(item._id)
        })

        this.detailForm.address = this.detailAddress ? this.detailAddress : this.detailForm.address
        console.log(123, this.detailForm.hours, this.detailForm.contact, this.detailForm.label)
      },
      async getOneStore() {
        const res = await getOneStore({id: this.id})
        this.detailForm = res.data.store

        this.dataByContact = []
        this.dataByBusiness = []
        this.dataByBusiness = this.detailForm.hours
        this.detailForm.contact.forEach(item => {
          this.dataByContact.push({value: item})
        })
        this.detailForm.label.forEach(item => {
          this.dataByLabel.push({value: item})
        })
        this.address = this.detailForm.address
        this.detailAddress = this.detailForm.address

        this.activeData = res.data.recommendActivity
        this.dishData = res.data.dish
        this.getLocation()
      },
      // 保存数据
      submitForm (formName) {
        this.setFormData()
        this.$refs[formName].validate(async (valid) => {
          console.log(123, valid)
          if (valid) {
            if(this.id) {
              this.detailForm['id'] = this.id
            }
            const res = await changeStore(this.detailForm)
            this.$router.push({name: 'storeList'})
          } else {
            return false;
          }
        });
      },
      // 重置表单
      resetForm (formName) {
        this.dataByContact = []
        this.dataByBusiness = []
        this.dataByLabel = []
        this.$refs[formName].resetFields()
      },
      // 重置过滤器表单
      resetFormByFilter (formName) {
        this.form = {
          cellphone: '',
          startDate: '',
          endDate: ''
        }
      },

      /**
       * @description: 处理tab页切换
       * @param {type} 
       * @return: 
       */      
      handleTabSwitch (data) {
        if(data.name === '2') { // 门店消费记录
          this.getTableData()
        }
      },

      // ----------------地图相关--------------------------------
      //定位获得当前位置信息
      getMyLocation() {
        let geolocation = new qq.maps.Geolocation("KGVBZ-EKHWJ-FRGF2-KYLTA-WQB6Z-OSFXG", "muse");
        geolocation.getIpLocation(this.showPosition, this.showErr);
      },
      initMap(result) {
        this.map = new qq.maps.Map(document.getElementById("container_map"), {
          // 地图的中心地理坐标。
          center: new qq.maps.LatLng(this.latitude, this.longitude),
          zoom: 13
        });
      },
      showPosition(position) {
        this.latitude = position.lat;
        this.longitude = position.lng;
        this.initMap()
      },
      showErr() {
        this.getMyLocation();//定位失败再请求定位，测试使用
      },
      getLocation() {
        const geocoder = new qq.maps.Geocoder({
          complete : (result) => {
            this.detailForm.address = result.detail.address
            this.detailForm.location = [result.detail.location.lat, result.detail.location.lng]
            this.detailForm.city = result.detail.addressComponents.city
            this.detailForm.district = result.detail.addressComponents.district

            this.map.setCenter(result.detail.location);
            const marker = new qq.maps.Marker({
              map: this.map,
              position: result.detail.location
            });
          }
        })
        const address = this.detailForm.city + this.address
        geocoder.getLocation(address)
      },

      //----------------门店消费记录相关----------------------------
      // 获取列表数据
      async getTableData(value, type) {
        let params = {
          page: type === 'page'? (value ? value : this.paging.page) : this.paging.page,
          pageSize: type === 'pageSize'? (value ? value : this.paging.pageSize) : this.paging.pageSize
        }
        params = Object.assign({}, params, {id: this.id}, this.form)
        const { code, data: { total, currentPage, data, pageSize, usedPoint, giftPoint,storeGiftPoint,storePendingPoint } } = await getExpenseHistoryList(params)
        this.paging.total = total
        this.paging.pageSize = pageSize
        this.paging.page = currentPage
        this.tableData = data

        this.usedPoint = usedPoint
        this.giftPoint = giftPoint
        this.storeGiftPoint = storeGiftPoint
        this.storePendingPoint = storePendingPoint
      },
      recall(row) {
        this.wrapConfirm(-1, '要撤销该条消费记录，是否继续？').then(async() => {
          await recallUserExpenseHistory({id: row._id})
          this.getTableData()
        }).catch(() => {})
      },

      //----------------推荐相关-------------------------------------
      handleSizeChangeByOne(value) {
        this.getDataByOne(value, 'pageSize')
      },
      handleCurrentChangeByOne(value) {
        this.getDataByOne(value, 'page')
      },
      fnOpenPopup(type) {
        this.pagingByOne.page = 1
        this.recommendType = type
        if(type === 'dish') {
          this.dialogDataVisibleByDish = true
        } else {
          this.dialogDataVisibleByActive = true
        }
        this.getDataByOne()
      },
      removeDish(index) {
        if(this.recommendType === 'dish') {
          this.dishData.splice(index, 1)
        } else {
          this.activeData.splice(index, 1)
        }
      },
      fnClosePopup () {
        this.dialogDataVisibleByDish = false
        this.dialogDataVisibleByActive = false
      },
      // 获得门店列表
      async getDataByOne(value, type) {
        let params = {
          page: type === 'page'? (value ? value : this.pagingByOne.page) : this.pagingByOne.page,
          pageSize: type === 'pageSize'? (value ? value : this.pagingByOne.pageSize) : this.pagingByOne.pageSize
        }
        const { code, data: { total, currentPage, data, pageSize } } = this.recommendType === 'dish'? await getDishList(params) : await getActivitylist(params)
        this.pagingByOne.total = total
        this.pagingByOne.pageSize = pageSize
        this.pagingByOne.page = currentPage
        this.tableData = data

        let showAry = ''
        if(this.recommendType === 'dish') {
          showAry = this.tableData.filter(item => {
            for(let i = 0; i < this.dishData.length; i++) {
              if(item._id === this.dishData[i]._id) {
                return true
              }
            }
          })
        } else {
          showAry = this.tableData.filter(item => {
            for(let i = 0; i < this.activeData.length; i++) {
              if(item._id === this.activeData[i]._id) {
                return true
              }
            }
          })
        }
        

          this.$nextTick(() => {
            showAry.forEach(item => {
              this.$refs.ref_table.toggleRowSelection(item, true)
            })
          })
      },
      handleSelectionChange(valueAry, value) {
        if(this.recommendType === 'dish') {
          // this.dishData = value
          this.dishData = this.dishData.map(item => {
            return JSON.stringify(item)
          })
          if (this.dishData.indexOf(JSON.stringify(value)) > -1) {
            this.dishData.splice(this.dishData.indexOf(JSON.stringify(value)), 1)
          } else {
            this.dishData.push(JSON.stringify(value))
          }
          this.dishData = this.dishData.map(item => {
            return JSON.parse(item)
          })
        } else {
          // this.activeData = value
          this.activeData = this.activeData.map(item => {
            return JSON.stringify(item)
          })
          if (this.activeData.indexOf(JSON.stringify(value)) > -1) {
            this.activeData.splice(this.activeData.indexOf(JSON.stringify(value)), 1)
          } else {
            this.activeData.push(JSON.stringify(value))
          }
          this.activeData = this.activeData.map(item => {
            return JSON.parse(item)
          })
        }
      },
      fnSaveChoosed () {
        this.fnClosePopup()
      },

      // 导出excel
      async exportExcel() {
        await exportStoreExpenseHistory({id: this.id}).then((res) => {
        excel.exportRaw(res.data,'门店消费记录')
        })
      }
    }
  }
</script>

<style scoped>
    .sum_up_label {
        font-size: 16px;
        margin-right: 20px;
        font-weight: bold;
    }
</style>
